<div class="p-2 pb-3 w-100 h-100 container" #container (click)="input.focus()">
  <div class="w-100 text-warning fw-bold small" (click)="$event.stopPropagation()">
    Interactive terminal is not supported for this connection. Check <a
    href="https://github.com/webosbrew/dev-manager-desktop/wiki/About-Dumb-Shell" appExternalLink>here</a> for
    more info.
  </div>
  @for (item of logs; track item.id) {
    <div class="user-select-text" (click)="$event.stopPropagation()">
      <div class="d-flex flex-row align-items-baseline">
        <label class="mx-1 text-secondary">&gt;</label>
        <pre class="w-100 mb-0 user-select-text">{{ item.input }}</pre>
      </div>
      <div class="d-flex flex-row align-items-baseline">
        <label class="mx-1" [class.text-primary]="item.status === 0" [class.text-danger]="item.status">&lt;</label>
        <pre class="w-100 mb-0 user-select-text">{{ item.output }}</pre>
      </div>
      <hr class="w-100">
    </div>
  }
  <div class="d-flex flex-row align-items-baseline prompt">
    <label class="mx-1 text-secondary">&gt;</label>
    <textarea class="flex-fill text-light term-focus" wrap="soft" autosize autofocus spellcheck="false"
              [disabled]="readonly || working"
              [placeholder]="working ? 'Please wait for the command to finish' : 'Input command here'"
              (keydown.enter)="$event.preventDefault(); send(input.value); input.value=''" #input></textarea>
    @if (working) {
      <div class="spinner-border spinner-border-sm align-self-center" role="status">
        <span class="visually-hidden">Executing...</span>
      </div>
    }
  </div>
</div>
